<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-13 13:52:48
 * @LastEditors: william
 * @LastEditTime: 2025-11-10 16:57:23
-->
<template>
  <nw-PageTitle :title="$t('pages.cooking')" />
  <nw-PageContainer isTabbar>
    <scroll-view class="scroll-content" scroll-y>
      <view v-if="bindDeviceList.length" class="lists">
        <cookingRow 
          v-for="row in bindDeviceList" 
          :info="row" 
          :key="row"
          @click="handleListClick"
          @shutdown="handleShutdown"
          @manual-washpot="handleManualWashPot"
          @auto-washpot="handleAutoWashPot"
          @complete-washpot="handleCompleteWashPot"
          @pause="handlePause"
          @continue="handleContinue"
          @stop="handleStop"
          @outpot="handleOutPot"
          @complete-outpot="handleCompleteOutPot"
          />
      </view>
      <Emptylist v-else text="无设备..." />
    </scroll-view>
  </nw-PageContainer>
  <VoiceControlIcon />
  <up-toast ref="uToastRef" />
  <nw-Tabbar value="cooking" />
</template>

<script setup>
import { deviceProtocolRecipeService } from '@/service/deviceProtocolRecipeService.js'
import { deviceProtocolManualService } from '@/service/deviceProtocolManualService.js'
import cookingRow from './component/cookingRow.vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  }
})

const uToastRef = ref(null)
const { bindDeviceList } = storeToRefs(useDeviceStore())
const deviceStatus = g_i.device.DeviceStatus

onMounted(_ => {
})

const handleListClick = (row, i) => {
  console.log('handleListClick', row)
  const { cookingInfo, recipeInfo } = row
  // 手动炒菜状态
  if (row.status === deviceStatus.ManualCooking) {
    uni.navigateTo({
      url: `/pages/manual/index?sn=${row.sn}`
    })
  } else {
    uni.navigateTo({
      url: `/pages/cooking/detail?sn=${row.sn}&cookingId=${cookingInfo.cookingId}&recipeId=${recipeInfo.id}`
    })
  }
}

const toastTip = (type = 1, message = '操作成功') => {
  // 1-成功 0-失败
  uToastRef.value.show({
    type: type ? 'success' : 'error',
    message,
    duration: 2000
  })
}

// --- 指令发送逻辑 ---
const sendCookCommand = (service, method, params = []) => {
  uni.showLoading({ title: '指令处理中...', mask: true })
  return service[method](...params)
    .then(r => {
      g_utils.writeLog(`${service}-${method}-发送消息成功：`, r)
      toastTip()
      return r
    })
    .catch(e => {
      g_utils.writeLog(`${service}-${method}-发送消息失败：`, e)
      toastTip(0, e)
      throw e
    })
    .finally(() => uni.hideLoading())
}

const handleShutdown = row => {
  console.log('handleShutdown-关机')
  sendCookCommand(deviceProtocolManualService, 'shutdownDevice', [row.sn]).then(
    () => {
      row.status = deviceStatus.Shutdown
    }
  )
}

const handleAutoWashPot = row => {
  console.log('handleAutoWashPot-自动洗锅')
  sendCookCommand(deviceProtocolRecipeService, 'startAutoWashPot', [
    row.sn
  ]).then(() => {
    row.status = deviceStatus.Idle
  })
}

const handleManualWashPot = row => {
  console.log('handleManualWashPot-手动洗锅')
  sendCookCommand(deviceProtocolManualService, 'startManualWashPot', [
    row.sn
  ]).then(() => {
    row.status = deviceStatus.ManualWashPot
  })
}

const handleCompleteWashPot = row => {
  console.log('handleCompleteWashPot-完成洗锅')
  sendCookCommand(deviceProtocolManualService, 'finishManualWashPot', [
    row.sn
  ]).then(() => {
    row.status = deviceStatus.Idle
  })
}

const handlePause = row => {
  console.log('handlePause-暂停')
  sendCookCommand(deviceProtocolRecipeService, 'pauseCooking', [row.sn]).then(
    () => {
      row.status = deviceStatus.Pause
    }
  )
}

const handleContinue = row => {
  console.log('handleContinue-继续')
  sendCookCommand(deviceProtocolRecipeService, 'resumeCooking', [row.sn]).then(
    () => {
      row.status = deviceStatus.Cooking
    }
  )
}

const handleStop = row => {
  console.log('handleStop-终止')
  sendCookCommand(deviceProtocolRecipeService, 'stopCooking', [row.sn]).then(
    () => {
      row.status = deviceStatus.WaitPlating
    }
  )
}

const handleOutPot = row => {
  console.log('handleOutPot-开始出菜')
  sendCookCommand(deviceProtocolRecipeService, 'startPlating', [row.sn]).then(
    () => {
      row.status = deviceStatus.InPlating
    }
  )
}

const handleCompleteOutPot = row => {
  console.log('handleCompleteOutPot-完成出菜')
  sendCookCommand(deviceProtocolRecipeService, 'finishPlating', [row.sn]).then(
    () => {
      row.status = deviceStatus.Resting
    }
  )
}

// const startTimer = row => {
//   console.log('startTimer')
//   pressTime.value = Date.now()
// e.preventDefault()
// pressTimer.value = setTimeout(() => {
//   handleLongPress()
// }, 2000)
// }

// const endTimer = row => {
//   console.log('endTimer')
// clearTimeout(pressTimer.value)
// pressTimer.value = null
//   if (Date.now() - pressTime.value >= 2000) {
//     handleLongPress()
//   } else {
//     handleWashPot()
//   }
// }
</script>

<style lang="scss" scoped>
.scroll-content {
  height: calc(100%);
  overflow: hidden;
}

.lists {
  padding-top: 4rpx;
  padding-bottom: 18rpx;
  .list {
    padding: 0 20rpx 0 22rpx;
    box-sizing: border-box;
  }
}

.list-title {
  padding: 18rpx 16rpx;
  font-size: 24rpx;
  font-weight: bold;
  color: var(--main-theme);
  &.orange {
    color: #fbac2b;
  }
  &.red {
    color: #eb2534;
  }
}

.list-content {
  display: flex;
  justify-content: space-between;
  // align-items: center;
  padding: 16rpx 22rpx 16rpx 16rpx;
  background-color: var(--bg-color);
  border-radius: 18rpx;
  box-sizing: border-box;
  .lc-left {
    flex-shrink: 0;
    position: relative;
    border-radius: 22rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
    overflow: hidden;
    .recipe-img {
      display: block;
      width: 180rpx;
      height: 180rpx;
      background-color: var(--body-theme);
    }
    .alert-icon {
      position: absolute;
      z-index: 11;
      top: 0;
      right: 0;
      width: 50rpx;
    }
    .mask-wrap {
      position: absolute;
      left: 0;
      top: 0;
      z-index: 10;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(2, 6, 14, 0.33);
      .mask-img {
        width: 70rpx;
        height: 70rpx;
      }
    }
  }
  .lc-center {
    flex: 1;
    margin-left: 18rpx;
    padding-top: 7rpx;
    .name {
      font-size: 24rpx;
      font-weight: 400;
      color: var(--color-000);
      &.disabled {
        color: var(--color-999);
      }
    }
    .step-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 20rpx;
      line-height: 20rpx;
      margin-top: 20rpx;
      padding: 6rpx 18rpx 6rpx 10rpx;
      border-radius: 8rpx;
      background-color: var(--sub-theme);
      font-size: 18rpx;
      font-weight: 400;
      color: var(--color-999);
      .step {
      }
      .duration {
        padding-left: 10rpx;
      }
    }

    .btns {
      display: flex;
      align-items: center;
      margin-top: 34rpx;
      .nw-button-wrap {
        &.nw-button-wrap {
          margin-left: 14rpx;
        }
        :deep(.nw-button) {
          height: 54rpx;
          margin: initial;
          padding: 0 28rpx;
          border-radius: 28rpx;
          box-sizing: border-box;
          .u-button__text {
            font-size: 22rpx !important;
            font-weight: 400;
          }
          &:not(.u-button--disabled) .u-button__text {
            color: var(--color-fff);
          }
        }
      }
    }
  }
  .lc-right {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 32rpx;
  }
}
</style>
